<template>
  <div>
    <a-table
      v-if="treeData.length"
      class="hte-table-content"
      :scroll="{ x: true }"
      :columns="columns"
      :data-source="treeData"
      :pagination="false"
      :loading="loading"
      :rowKey="rowKey"
      :defaultExpandAllRows="true"
      bordered
      size="middle"
    >
      <!--格式化金额字段-->
      <template slot="amount" slot-scope="text">
        <span>{{!!text&&text!=''?parseFloat(text).toLocaleString():'0'}}</span>
      </template>
      <template slot="factoryCode" slot-scope="text,record">
        <span>{{record.factoryCode?record.factoryCode+'('+record.factory+')':''}}</span>
      </template>
    </a-table>
  </div>
</template>
<script>

import { tranListToTreeData, getOneArr } from '@/utils/util';
import cloneDeep from 'lodash/cloneDeep';

export default {
  name: 'ExpandedRowsTableDisplay',
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      default: []
    },
    props: {
      type: Object, // 数据源的字段别名
      default() {
        return {
          pid: 'pid',
          id: 'id',
        };
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '1',  // 1时data结构不为树结构， 2为数结构
    },
    rowKey: {
      type: String,
    },
  },
  data() {
    return {
    }
  },
  computed: {
    treeData() {
      if(this.type == '1'){
        return this.data
      }else{
        // 不包含children时需进行转换
        const data = cloneDeep(this.data)
        return tranListToTreeData(data, this.props.pid, this.props.id) || [];
      }      
    },
  },
  mounted() {
  },
  methods: {
    changeTreeTable(){
      this.$forceUpdate(); // 表格嵌套输入框层级太深无法显示输入
    },
    getRealityData(){
      return getOneArr(this.treeData); // 树型结构转换为一唯数组     
    }
  },
}
</script>
<style lang="less" scoped>
.def-col{color: #a19c9c}
.undef-col{color: #fcb202}
/deep/.ant-table .ant-table-tbody .ant-table-row td {
  input, .ant-input-number{height: 32px !important;width: 100%;}
}
</style>
